<template>
  <n-flex
    class="manage-item box"
    vertical
  >
    <n-tag
      type="success"
      size="small"
      style="width: 70px"
    >
      <template #icon>
        <n-icon :component="BookmarksOutline" />
      </template>
      创建人
    </n-tag>
    <span class="manage-item__title">{{ title }}</span>
    <span class="manage-item__text">{{ remark }}</span>
    <n-flex
      align="center"
      size="small"
    >
      <n-icon
        :component="CalendarOutline"
        size="14"
        color="#999"
      />
      <span class="manage-item__text">{{ createTime || '' }}</span>
    </n-flex>
    <n-flex justify="space-between">
      <n-flex
        align="center"
        size="small"
      >
        <n-icon
          :component="PeopleOutline"
          size="14"
          color="#999"
        />
        <span class="manage-item__text">2</span>
      </n-flex>
    </n-flex>
    <div class="manage-item__more">
      <n-dropdown
        trigger="hover"
        :options="options"
        @select="key => emits('select', key, id)"
      >
        <n-icon
          :component="EllipsisHorizontal"
          color="#999"
        />
      </n-dropdown>
    </div>
  </n-flex>
</template>

<script lang="ts" setup>
  import {
    BookmarksOutline,
    PeopleOutline,
    CalendarOutline,
    EllipsisHorizontal
  } from '@vicons/ionicons5'
  defineProps<{
    id: number
    title: string
    remark?: string
    createTime: string
  }>()

  const emits = defineEmits(['select'])

  const options = [
    {
      label: '删除',
      key: 'delete'
    },
    {
      label: '编辑',
      key: 'edit'
    }
  ]
</script>

<style scoped lang="scss">
  .manage-item {
    position: relative;
    padding: $space-default;
    &__more {
      position: absolute;
      right: 24px;
      top: 24px;
      cursor: pointer;
    }
    &__title {
      font-size: $fs-lg;
      font-weight: bold;
    }
    &__text {
      color: #999;
      font-size: 12px;
    }
  }
</style>
